<%--
  Created by IntelliJ IDEA.
  User: lanmeng
  Date: 2020/8/20
  Time: 15:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script src="${pageContext.request.contextPath}/static/js/jquery-2.1.0.js" type="text/javascript"
        charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js" type="text/javascript"
        charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/static/toastr/toastr.min.js" type="text/javascript"
        charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/member/css/list.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/toastr/toastr.min.css">
<html>
<head>
    <title>会员刷卡</title>
    <style type="text/css">
        #topSlotCard {
            margin-left: 200px;
            width: 70%;
        }
    </style>
</head>
<body>
<div style="margin-top: 10px"></div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    会员信息列表
                </h4>
            </div>
            <div class="modal-body">
                <table class="table table-striped table-hover table-bordered" id="cardList">
                    <thead style="background-color: #BEDDFA">
                    <th>会员卡号</th>
                    <th>持卡人姓名</th>
                    <th>会员ID</th>
                    <th>会员等级</th>
                    <th>卡余额</th>
                    <th>会员积分</th>
                    <th>状态</th>
                    </thead>
                    <tbody id="tb"></tbody>
                </table>
                <div class="form-inline">
            <span id="navBar">显示第<span id="start"></span>到<span id="end"></span>条，总共<span id="count"></span>页记录，每页显示
                <div class="btn-group dropup">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span
                    id="pageCount"></span>&nbsp;&nbsp;<span class="caret"></span></button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="javascript:page(1,5)">5</a></li>
                <li><a href="javascript:page(1,10)">10</a></li>
                <li><a href="javascript:page(1,50)">50</a></li>
                <li><a href="javascript:page(1,100)">100</a></li>
            </ul>
        </div>
				条记录</span>
                    <div class="btn-group pull-right">
                        <a type="button" class="btn"><span class="glyphicon glyphicon-menu-left" onclick="page(pageBean.pageNo-1,pageBean.pageSize)"></span></a>
                        <button type="button" class="btn" style="background-color: #3e94ff;" id="pageSize">1</button>
                        <a type="button" class="btn"><span class="glyphicon glyphicon-menu-right" onclick="page(pageBean.pageNo+1,pageBean.pageSize)"></span></a>
                    </div>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div id="topSlotCard">
    <table id="tab">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">会员信息</h3>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员卡ID</span>
                            <input class="form-control" placeholder="会员卡ID" name="serchCardId"
                                   id="serchCardId">
                        </div>
                    </div>
                    <button type="button" class="btn btn-danger" id="readCard" onclick="readCard()">读卡</button>
                    <a type="button" href="swiping_card.jsp" class="btn btn-info">重置</a>
                    <button type="button" class="btn btn-primary" onclick="page(1,5)" data-toggle="modal"
                            data-target="#myModal">会员详情
                    </button>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员ID  </span>
                            <input class="form-control" placeholder="" readonly="readonly" name="userId" id="userId">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员姓名  </span>
                            <input class="form-control" placeholder="" readonly="readonly" name="userName"
                                   id="userName">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员卡ID </span>
                            <input class="form-control" placeholder="" readonly="readonly" name="cardId" id="cardId">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员卡余额</span>
                            <input class="form-control" placeholder="" readonly="readonly" name="amout" id="amout">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员等级  </span>
                            <input class="form-control" placeholder="" readonly="readonly" name="cardLevel"
                                   id="cardLevel">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group input-group">
                            <span class="input-group-addon">会员积分  </span>
                            <input class="form-control" placeholder="" readonly="readonly" name="credit" id="credit">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </table>
    <div class="panel panel-success">
        <div class="panel-body">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#userShow" data-toggle="tab">会员基本资料</a></li>
                <li><a href="#orderShow" onclick="consumeRecord(1,5)" data-toggle="tab">会员消费记录</a></li>
                <li><a href="#rechargeShow" onclick="rechargeRecord(1,5)" data-toggle="tab">会员充值记录</a></li>
            </ul>
            <div id="mytab-content" class="tab-content" style="width: 100%">
                <div class="tab-pane fade in active" id="userShow">
                    <table id="tab1" class="table table-bordered table-striped table-hover text-center">
                        <tr>
                            <td class="col-sm-3">会员编号</td>
                            <td id="userIdShow" class="col-sm-3"></td>
                            <td class="col-sm-3">会员姓名</td>
                            <td id="userNameShow" class="col-sm-3"></td>
                        </tr>
                        <tr>
                            <td>会员手机号</td>
                            <td id="phoneShow"></td>
                            <td>会员地址</td>
                            <td id="adressShow"></td>
                        </tr>
                        <tr>
                            <td>会员身份证</td>
                            <td id="idNoShow"></td>
                            <td>会员卡状态</td>
                            <td id="statusShow"></td>
                        </tr>
                        <tr>
                            <td>会员卡Id</td>
                            <td id="cardIdShow"></td>
                            <td>会员卡余额</td>
                            <td id="amountShow"></td>
                        </tr>
                        <tr>
                            <td>性别</td>
                            <td id="sexShow"></td>
                            <td>会员卡等级</td>
                            <td id="cardLevelShow"></td>
                        </tr>
                    </table>

                </div>
                <%--                会员消费记录--%>
                <div class="tab-pane fade" id="orderShow">
                    <table class="table table-striped table-hover table-bordered" id="orderList">
                        <thead style="background-color: #BEDDFA">
                        <tr>
                            <th>订单编号</th>
                            <th>会员卡号</th>
                            <th>会员等级</th>
                            <th>应付金额</th>
                            <th>实付金额</th>
                            <th>商品积分</th>
                            <th>备注</th>
                            <th>创建时间</th>
                        </tr>
                        </thead>
                        <tbody id="tb1"></tbody>
                    </table>
                    <div class="form-inline">
                        <span id="navBar2">显示第<span id="start2"></span>到<span id="end2"></span>条，总共<span id="count2"></span>页记录，每页显示
                        <div class="btn-group dropup">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span
                                    id="pageCount2"></span>&nbsp;&nbsp;<span class="caret"></span></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="javascript:consumeRecord(1,5)">5</a></li>
                                <li><a href="javascript:consumeRecord(1,10)">10</a></li>
                                <li><a href="javascript:consumeRecord(1,50)">50</a></li>
                                <li><a href="javascript:consumeRecord(1,100)">100</a></li>
                            </ul>
                        </div>
				        条记录</span>
                    </div>
                    <div class="btn-group pull-right" style="margin-top:-35px">
                        <a type="button" class="btn"><span class="glyphicon glyphicon-menu-left" onclick="consumeRecord(pageBean.pageNo-1,pageBean.pageSize)"></span></a>
                        <button type="button" class="btn" style="background-color: #3e94ff;" id="pageSize2">1</button>
                        <a type="button" class="btn"><span class="glyphicon glyphicon-menu-right" onclick="consumeRecord(pageBean.pageNo+1,pageBean.pageSize)"></span></a>
                    </div>
                </div>
                <%--                会员充值记录--%>
                <div class="tab-pane fade" id="rechargeShow">
                    <table class="table table-striped table-hover table-bordered" id="rechargeList">
                        <thead style="background-color: #BEDDFA">
                        <tr>
                            <th>会员姓名</th>
                            <th>会员卡号</th>
                            <th>充值金额</th>
                            <th>充值前金额</th>
                            <th>充值后金额</th>
                            <th>充值规则</th>
                            <th>备注</th>
                            <th>创建时间</th>
                        </tr>
                        </thead>
                        <tbody id="tb2"></tbody>
                    </table>
                    <div class="form-inline">
                        <span id="navBar1">显示第<span id="start1"></span>到<span id="end1"></span>条，总共<span id="count1"></span>页记录，每页显示
                        <div class="btn-group dropup">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span
                                id="pageCount1"></span>&nbsp;&nbsp;<span class="caret"></span></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="javascript:rechargeRecord(1,5)">5</a></li>
                                <li><a href="javascript:rechargeRecord(1,10)">10</a></li>
                                <li><a href="javascript:rechargeRecord(1,50)">50</a></li>
                                <li><a href="javascript:rechargeRecord(1,100)">100</a></li>
                            </ul>
                        </div>
				        条记录</span>
                    </div>
                    <div class="btn-group pull-right" style="margin-top:-35px">
                        <a type="button" class="btn"><span class="glyphicon glyphicon-menu-left" onclick="rechargeRecord(pageBean.pageNo-1,pageBean.pageSize)"></span></a>
                        <button type="button" class="btn" style="background-color: #3e94ff;" id="pageSize1">1</button>
                        <a type="button" class="btn"><span class="glyphicon glyphicon-menu-right" onclick="rechargeRecord(pageBean.pageNo+1,pageBean.pageSize)"></span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="${pageContext.request.contextPath}/member/js/swiping_card.js" type="text/javascript"
        charset="utf-8"></script>
</html>
